<template>
  <view class="search-container flex-row" @click="toSearch">
    <text class="title">{{ hotTitle }}</text>
    <image src="@/static/search/sousuo.png" class="search-icon"></image>
  </view>
</template>

<script>
import {searchApi} from "@/api";
import utils from "@/libs/utils";

export default {
  name: 'SearchNavBar',
  props: ['hot'],
  data() {
    return {
      hotIndex: 0,
    }
  },
  computed: {
    hotTitle() {
      const c = this.hot[this.hotIndex]
      return c ? c.content : '模糊搜索帮助你快速找题'
    }
  },
  created() {
    this.startHot()
  },
  destroyed() {
    console.log('SearchNavBar destroyed')
    clearInterval(this._interval)
  },
  methods: {
    startHot() {
      this._interval = setInterval(() => {
        if (utils.getCurrentPage() !== 'home') {
          // console.log(utils.getCurrentPage(), 'home in background')
          return
        }

        if (this.hotIndex + 1 < this.hot.length) {
          this.hotIndex++;
        } else {
          this.hotIndex = 0;
        }
      }, 5000)
    },
    toSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      });
    }
  }
}
</script>

<style scoped lang='scss'>
.search-container {
  border-radius: 100rpx;
  align-items: center;
  justify-content: space-between;
  height: 65rpx;
  border: none;
  background-color: #fff;
  margin: 0;
  .title {
    color: #666;
    font-size: 28upx;
    text-align: left;
    margin-left: 30upx;
  }

  .search-icon {
    width: 32upx;
    height: 32upx;
    margin-right: 30upx;
  }
}
</style>
